<template>
    <div>
        <el-row :gutter="20" v-if="meal && meal.length">
            <el-col :xs="24" :sm="12" :md="8" v-for="dish in meal" :key="dish.dish_id">
                <el-card class="box-card">
                    <img :src="getDishImageUrl(dish.image_url)" class="dish-image" />
                    <div class="card-content">
                        <h3>{{ dish.name }}</h3>
                        <div class="rating-section">
                            <el-button size="default" type="primary" @click="rateDish(dish.dish_id)">评分</el-button>
                            平均得分: {{ dish.average_rating || 5 }}
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div v-else class="no-dishes">
            <p>暂未安排</p>
        </div>
    </div>
</template>

<script>
import apiClient from '../api';  // 确保路径正确

export default {
    props: ['meal'],
    methods: {
        rateDish(dish_id) {
            this.$router.push({ name: 'RateDish', params: { dish_id } });
        },
        getDishImageUrl(imageUrl) {
            return imageUrl ? `${apiClient.defaults.baseURL}${imageUrl}` : `${apiClient.defaults.baseURL}/uploads/default-image.jpeg`;
        }
    }
};
</script>

<style scoped>
.box-card {
    margin-bottom: 20px;
}

.dish-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    text-align: center;
}

.no-dishes {
    text-align: center;
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
}

@media (max-width: 600px) {
    .box-card {
        margin-bottom: 10px;
    }

    .dish-image {
        height: 150px;
    }

    .el-form-item__content {
        display: flex;
        flex-direction: column;
    }
}
</style>